<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <el-col class="left_input">
          <span>标签名称</span>
          <el-input v-model="page.keyword" class="catalogue" />
        </el-col>
        <el-col style="height:60px" class="right_select">
          <span>状态</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-button @click="clearClick">清除</el-button>
        <el-button type="primary" @click="searchClick">搜索</el-button>
        <el-col class="right_button">
          <el-button type="success" icon="el-icon-edit" size="small" @click="addSports">新增技巧</el-button>
        </el-col>
      </el-row>
      <div class="alert" closable="false">
        <el-alert :closable="false" :title="`数据一共${page.counts}条`" type="info" show-icon />
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="序号" type="index" width="180" />
        <el-table-column prop="title" label="文章标题" width="180">
          <template v-slot="{row}">
            <span style="margin-right:8px">{{ row.title }}</span>
            <i class="el-icon-film" style="color:blue" @click="videoDialog(row)" />
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" />
        <el-table-column prop="username" label="录入人" />
        <el-table-column prop="createTime" label="录入时间">
          <template v-slot="{row}">
            {{ row.createTime | formatDate }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template v-slot="{row}">
            <div>{{ row.state ===1?'启用':'禁用' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" sortable="" fixed="right" width="250">
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="previewClick(row)">预览</el-button>
            <el-button type="text" size="small" @click="disabledClick(row)">{{ row.state===1?'禁用':'启用' }}</el-button>
            <el-button type="text" size="small" :disabled="row.state?false:true" @click="assignRoles(row)">修改</el-button>
            <el-button type="text" size="small" :disabled="row.state?false:true" @click="delRoles(row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- 放置分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height:60px">
        <el-pagination
          :current-page="page.page*1"
          :page-size="page.size*1"
          :total="page.counts"
          layout="prev,pager,next"
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <addDialog :role="Role" :is-add-dialog-show.sync="isAddDialogShow" :table-data="tableData" :role-id="RoleId" @updateFormdata="updateFormdata" />
    <PreviewDialog :roles="Roles" :is-preview-dialog-show.sync="isPreviewDialogShow" />
    <VideoDialog :is-video-dialog-show.sync="isVideoDialogShow" :video-u-r-l="videoURL" @clear-video-dialog="clearvideoURL" />
  </div>
</template>

<script>
import { interviewSkillAPI, stateArticlesAPI, deleteArticlesAPI } from '@/api/index'
import addDialog from './components/add-dialog.vue'
import PreviewDialog from './components/preview-dialog.vue'
import VideoDialog from './components/video-dialog.vue'
export default {
  name: 'TableLayout',
	components: {
		addDialog,
		PreviewDialog,
		VideoDialog
	},
  data() {
    return {
			currentPage: 1,
      activeNames: '',
      ruleForm: {
				searchKey: '',
				page: 1,
				pagesize: 10,
				state: ''
			},
      rules: {},
      stateList: [
        {
          value: '1',
          label: '启用'
        }, {
          value: '0',
          label: '禁用'
        }
      ],
			value: '',
      tableData: [],
			page: { // 声明一个对象，保存分页的数据
				page: 1,
				size: 10,
				counts: 0,
				total: 0,
				keyword: ''
			},
			state: '', // 初始化状态用于转换
			isAddDialogShow: false,
			isPreviewDialogShow: false,
			isVideoDialogShow: false,
			disabled: false, // 点击禁用按钮，控制按钮点击的变量
			Role: {},
			Roles: {},
			RoleId: '',
			title: '',
			inputElement: '',
			videoURL: ''
    }
  },
	created() {
		this.getLabelTags()
	},
  methods: {
		// 请求面试技巧 的列表数据
		async	getLabelTags() {
			const res = await interviewSkillAPI(this.page)
			const { counts, pagesize, pages, items, page } = res
			this.page.total = pages
			this.page.counts = counts
			this.page.size = pagesize
			this.tableData = items
			this.page.page = page
		},

		// 点击分页按钮，切换分页
		changePage(newpage) {
			this.page.page = newpage
			this.getLabelTags()
		},

		// 点击添加技巧，弹出弹出层，添加技巧
		addSports() {
			this.isAddDialogShow = true
			this.RoleId = ''
		},

		// 点击 启用/禁用 判断用户状态，并调用状态接口，将状态保存到后台
		async	disabledClick(row) {

			if (row.state === 1) {
				// 显示启用按钮，表示禁用状态。状态，修改，删除都不能使用
				row.state = 0
			await stateArticlesAPI(row)
			} else {
				row.state = 1
			await stateArticlesAPI(row)
			}
		},

		// 点击修改按钮，弹出弹出层，修改当前行的信息
		async	assignRoles(row) {
			this.Role = row
			this.RoleId = row.id
			this.isAddDialogShow = true
		},
		// 子传父（用于关闭弹层的时候重置数据）
		updateFormdata(res) {
			this.formData = res
		},

		// 点击预览按钮，弹出预览弹出层
		previewClick(row) {
			this.Roles = row
			this.isPreviewDialogShow = true
			console.log(row);
		},

		// 点击清除按钮，清除当前搜索框的值
		clearClick() {
			this.page.keyword = ''
			this.value = ''
		},

		// 点击删除按钮，删除文章
		async	delRoles(row) {
			try {
				await this.$confirm('确定要删除该文章吗？')
				await	deleteArticlesAPI(row.id)
				this.getLabelTags()
				this.$message.success('删除成功！')
			} catch (err) {
				console.log(err);
			}
		},

		// 点击视频按钮，调出视频弹窗
		videoDialog(row) {
			this.isVideoDialogShow = true
			this.videoURL = row.videoURL
		},
		// 点击搜索按钮，实现搜索功能
		async searchClick() {
      const { items } = await interviewSkillAPI({
				page: this.page.page,
				pagesize: this.page.size,
				keyword: this.page.keyword,
				state: this.value
			})
			this.tableData = items
		},
		clearvideoURL() {
			this.videoURL = ''
		}

  }
}
</script>
<style lang='scss' scoped>
.app-container{
	padding: 15px;
}
::v-deep .el-card__body{
	padding-top: 3px;
}
.left_input{
	width: 300px;
}
span{
	font-weight: 600;
	margin-right: 20px;
}
::v-deep .el-input{
	width: 200px;
}
.right_select{
	float: left;
	width: 300px;
}
.right_button{
	float: right;
	width: 32px;
	margin-right: 80px;
}
.cell{
	height: 23px;
	line-height: 23px;
}
</style>

